<script setup lang="ts">
import { Icon as VanIcon } from 'vant';
import {PropType} from "vue";

// 定义Blog接口
interface Blog {
  id: number;
  title: string;
  coverImage: string;
  tags: string[];
  content: string;
  thumbNum: number;
  favourNum: number;
  viewCount: number;
  commentCount: number;
  userId: number;
  createTime: Date
}

// 定义props
const props = defineProps({
  blog: Object as PropType<Blog>
});
</script>
<template>
  <div class="blog-card">
    <div class="cover-container">
      <img class="cover-image" :src="blog.coverImage" :alt="blog.title">
    </div>
    <div class="content-container">
      <div class="header">
        <h3 class="title">{{ blog.title }}</h3>
      </div>
      <div class="summary">
        <p class="text">{{ blog.content }}</p>
      </div>
      <div class="stats">
        <div class="stat-item">
          <van-icon name="eye-o" />
          <span>{{ blog.viewCount }}</span>
        </div>
        <div class="stat-item">
          <van-icon name="good-job-o" />
          <span>{{ blog.thumbNum }}</span>
        </div>
        <div class="stat-item">
          <van-icon name="star-o" />
          <span>{{ blog.favourNum }}</span>
        </div>
      </div>
    </div>
  </div>
</template>



<style scoped>
.blog-card {
  display: flex;
  width: 100%;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cover-container {
  width: 33.33%;
  background-color: #333;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px);
}

.content-container {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.header {
  text-align: right;
  margin-bottom: 8px;
}

.title {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.summary {
  flex: 1;
  margin-bottom: 8px;
}

.text {
  margin: 0;
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}

.stats {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
}

.stat-item .van-icon {
  font-size: 14px;
}
</style>
